<div class="bar-wrapper">
    <div *ngIf="stopped" class="bar-state">
       <span class="label">{{'VULNERABILITY.STATE.STOPPED' | translate}}</span>
    </div>
    <div *ngIf="queued" class="bar-state">
        <span class="label label-orange">{{'VULNERABILITY.STATE.QUEUED' | translate}}</span>
    </div>
    <div *ngIf="error" class="bar-state bar-state-error">
        <a  class="error-text" target="_blank" [href]="viewLog()">
            <clr-icon shape="error" class="is-error" size="24"></clr-icon>
            {{'VULNERABILITY.STATE.ERROR' | translate}}
        </a>
    </div>
    <div *ngIf="scanning" class="bar-state bar-state-chart">
        <div>{{'VULNERABILITY.STATE.SCANNING' | translate}}</div>
        <div class="progress loop loop-height"><progress></progress></div>
    </div>
    <div *ngIf="completed" class="bar-state bar-state-chart">
        <hbr-vulnerability-summary-chart [summary]="summary"></hbr-vulnerability-summary-chart>
    </div>
    <div *ngIf="unknown" class="bar-state">
        <clr-icon shape="warning" class="is-warning" size="24"></clr-icon>
        <span class="unknow-text">{{'VULNERABILITY.STATE.UNKNOWN' | translate}}</span>
    </div>
</div>